<div>
    <h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>{{'dlg.docname-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn" cdkFocusInitial>clear</mat-icon>
    <div mat-dialog-content>
        <div class="my-form-field" style="display: block;margin-bottom: 10px;">
            <span>{{'dlg.docname-name' | translate}}</span>
            <input [(ngModel)]="data.name" type="text" style="width:300px" [readonly]="data.readonly">
        </div>
        <div class="my-form-field" style="margin-bottom: 10px;;">
            <span>{{'dlg.docproperty-type' | translate}}</span>
            <mat-select [(value)]="data.type" placeholder="{{'dlg.doctype' | translate}}" style="width: 300px;">
                <mat-option *ngFor="let type of docType | enumToArray" [value]="type.key">
                    {{ type.value }}
                </mat-option>
            </mat-select>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button [disabled]="!isValid(data.name)" color="primary" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>